import React, { Component } from 'react'
import myaxios from '../../utils/myaxios'
import { NavBar, Carousel, Toast } from 'antd-mobile';
import './GoodsDetail.scss'
// 进行链接库
import { connect } from "react-redux";
//导入仓库
import store from '../../store'

class GoodsDetail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            swipers: {},
            imgHeight: 250,
            isShow: false,//轮播图的状态
            isClick: false
        }
    }
    componentDidMount() {
        let { goods_id } = this.props.match.params
        // 发送请求
        myaxios.get('/goods/detail', {
            params: {
                goods_id
            }
        }).then(res => {
            this.setState({
                swipers: res,
                isShow: true,
            })
        }).catch(err => {
            console.log(err)
        })
        //判断本地缓存中的数据
        let collect_str = localStorage.getItem("collections")
        let collections = JSON.parse(collect_str || "[]")
        //查找是否存在
        let index = collections.findIndex(v => {
            if (v.goods_id == goods_id) {
                return true
            }
        })

        if (index !== -1) {
            this.setState({
                isClick: true
            })
        }

    }
    // 收藏
    handCollect = () => {
        //获取本地缓存中的数据
        let collect_str = localStorage.getItem("collections")
        let collections = JSON.parse(collect_str || "[]")
        //查找是否存在
        console.log(collections)
        let index = collections.findIndex(v => {
            if (v.goods_id === this.state.swipers.goods_id) {
                return true
            }
        })
        //判断数据的状态
        if (index != -1) {
            //代表收藏过
            collections.splice(index, 1)
            Toast.info('取消收藏成功', 1)
            this.setState({
                isClick: false
            })
        } else {
            //没收藏过
            Toast.info('收藏成功', 1)
            collections.push(this.state.swipers)
            this.setState({
                isClick: true
            })
        }
        localStorage.setItem('collections', JSON.stringify(collections))
    }
    // 跳转购物车
    goCart = () => {
        this.props.history.push('/cart')
    }
    // 加入购物车
    addToCart = () => {
        //判断本地是否有购物车的数据
        let carsProduct = localStorage.getItem('products')
        let products = JSON.parse(carsProduct || "[]")
        let { goods_id } = this.props.match.params
        let index = products.findIndex(v => {
            // 判断地址的id和循环的id是否相同
            if (v.goods_id == goods_id) {
                return true
            }
        })

        if (index === -1) {
            let goodsInfo = this.state.swipers
            goodsInfo.num = 1
            goodsInfo.ischeck = true
            products.push(goodsInfo)
        } else {
            products[index].num++
        }
        localStorage.setItem('products', JSON.stringify(products))
    }
    // 跳转支付页面
    addToPay = () => {
        this.props.history.push('/pay')
    }
    render() {
        return (
            <div className='yg-detail'>
                {/* 头部开始 */}
                <div className='yg-detail-title'>
                    <NavBar
                        className='searchContent-top'
                        icon={<i className='iconfont icon-fanhui1'></i>}
                        onLeftClick={() => window.history.go(-1)}
                    >商品详情</NavBar>
                </div>
                {/* 头部结束 */}
                {/* 轮播图开始 */}
                <div className='yg-detail-swiper'>
                    {
                        // 如果都为真才显示
                        this.state.isShow && (
                            <Carousel infinite autoplay>
                                {this.state.swipers.pics && this.state.swipers.pics.map((v) => {
                                    return (
                                        <div
                                            key={v.goods_id}
                                            className="imageWrapper"
                                            style={{ display: "inline-block", width: "100%", height: this.props.imgHeight, }}
                                        >
                                            <img
                                                src={v.pics_mid}
                                                alt=""
                                                style={{ width: "100%", verticalAlign: "top" }}
                                                onLoad={() => {
                                                    window.dispatchEvent(new Event("resize"));
                                                    this.setState({ imgHeight: "auto" });
                                                }}
                                            />
                                        </div>)
                                })}
                            </Carousel>
                        )
                    }
                </div>
                {/* 轮播图结束 */}
                {/* 分享 收藏开始 */}
                <div className='yg-detail-fx'>
                    <div className='detail-left'>
                        <span>￥{this.state.swipers.goods_price}</span>
                    </div>
                    <div className='detail-right'>
                        <i className='iconfont icon-fenxiang'></i>
                        <i className={this.state.isClick ? 'iconfont icon-shoucang1 active' : 'iconfont icon-shoucang'} onClick={this.handCollect}></i>
                    </div>
                </div>
                {/* 分享 收藏结束 */}
                {/* 标题部分开始 */}
                <div className='yg-detail-goods_name'>
                    {this.state.swipers.goods_name}
                </div>
                {/* 标题部分结束 */}
                {/* 图文详情开始 */}
                <div className='yg-raphic-detail'>
                    <div className='yg-raphic-title'>图文详情</div>
                    <div className='goods-introduce' dangerouslySetInnerHTML={{ __html: this.state.swipers.goods_introduce }}></div>
                </div>
                {/* 图文详情结束 */}
                {/* 底部按钮开始 */}
                <div className='yg-detail-floor'>
                    <div className='detail-floor-item'>
                        <i className='iconfont icon-lianxikefu'></i>
                        <span>联系客服</span>
                    </div>
                    <div className='detail-floor-item' onClick={this.goCart}>
                        <i className='iconfont icon-gouwuche2'></i>
                        <span>购物车</span>
                    </div>
                    <div className='detail-floor-btn1' onClick={this.addToCart}>加入购物车</div>
                    <div className='detail-floor-btn2' onClick={this.addToPay}>立即购买</div>
                </div>
                {/* 底部按钮结束 */}
            </div>
        )
    }
}

//注入属性
const mapStateToProps = (state) => {
    return {
        imgHeight: state.GoodsReducer.imgHeight,
    }

}

//导出
export default connect(mapStateToProps, null)(GoodsDetail);